<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>h5-SVG 马赛克过渡</title>
    <link rel="stylesheet" href="4/normalize.min.css">
    <style>
        HTML,
        BODY {
            height: 100%;
        }

        svg {
            width: 800px;
            height: 532px;
            margin: 80px auto;
        }
    </style>
</head>

<body>
    <svg viewBox="0 0 800 532">
        <filter id="pixels" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox"
            primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-color="green" flood-opacity="1" x="0" y="0" width="1" height="1" result="flood" />
            <feComposite id="composite" in="SourceAlpha" in2="flood" operator="in" x="0" y="0" width="6" height="6"
                result="composite" />
            <feTile x="0" y="0" width="1000" height="1000" in="composite" result="tile1" />
            <feComposite in="SourceGraphic" in2="tile1" operator="in" result="composite1" />
            <feMorphology id="morphology" operator="dilate" radius="2" in="composite1" result="morphology" />
            <feColorMatrix id="colormatrix" type="saturate" values="0" x="0%" y="0%" width="100%" height="100%"
                in="morphology" result="colormatrix" />
        </filter>
        <image id="image" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"
            xlink:href="" filter="url(#pixels)"></image>
    </svg>
    <script src="4/index.js"></script>
</body>

</html>